<template>
	<view class="goods-detail">
		<view class="main-pic">
			<image style="height: 100%;" :src="goodsDetail.mainPic"></image>
		</view>
		<view class="goods-desc">
			<view class="goods-name-info">
				<view class="goods-jifen">
					<span>{{goodsDetail.price|| 0}}</span> 积分
				</view>
				<view class="goods-type-name"> {{goodsDetail.goodsTypeName}}</view>
				<!-- <view class="goods-name"> {{goodsDetail.goodsName}}</view> -->
				<view class="goods-amount-l">
					库存：{{goodsDetail.stock}}
				</view>

				<view class="exchange-block">
			<view class="exchange-block-title">
				<view class="exchange-block-title-l">兑换数量</view>
				<view class="exchange-title-r">
					<view class="exchange-title-pice">商品单价：{{goodsDetail.price|| 0}}</view>
					<view class="exchange-title-points">我的积分：{{point||0}}</view>
				</view>
			</view>
		</view>
		<view class="amount-input-block">
			<view class="amount-input-title">
				<view class="amount-input-title-l">所需积分：</view>
				<view class="amount-input-title-r">
					{{totalPoint}}
				</view>
			</view>
			<view class="amount-input-count" > 
			   <!-- <view ></view> -->
			   <uv-input type="number" placeholder="请输入数量" class="amount-input" :min="1" v-model="quantity" >
				<template v-slot:prefix>
					<image
						style="width: 52rpx;height: 52rpx;"
						src="../../static/img/pointsMall/minus.png"
						mode="scaleToFill"
						@click="quantityChange('minus')"
					/>
				</template>
				<template v-slot:suffix>
					<image
						style="width: 52rpx;height: 52rpx;"
						src="../../static/img/pointsMall/add.png"
						mode="scaleToFill"
						@click="quantityChange('add')"
					/>
				</template>
			   </uv-input>
			</view>
		</view>
			</view>
			<!-- <view class="goods-desc-line"></view> -->
			<!-- <view class="goods-amount">
				
				<view class="goods-amount-r">
					<image style="width: 24rpx;height: 28rpx; margin-right: 6rpx;" src="../../static/img/pointsMall/fire.png"></image>
					火热兑换中...
				</view>
			</view> -->
		</view>
		
		
		
		<!-- <uv-cell-group>
			<uv-cell title="兑换数量">
				<template v-slot:value>
					<view class="buy-quantity">
						<uv-number-box integer :min="1" v-model="quantity"></uv-number-box>
					</view>
				</template>
				<template v-slot:label>
					<text class="my-point">我的积分：{{point}}</text>
				</template>
			</uv-cell>
		</uv-cell-group> -->
		<view class="goods-detail-content padding-lr32">	
			<view class="detail-title">商品详情</view>
			<uv-parse :content="goodsDetail.goodsDetail"></uv-parse>
		</view>

		<view >
			<view>
				<!-- <uv-button type="primary" text="立即兑换" size="large" @click="exchange"></uv-button> -->
				<button class="exchange-btn" @click="exchange">兑换</button> 
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId: '',
				goodsDetail: '',
				quantity: 1,
				point: '',
			}
		},
		onLoad(option) {
			this.goodsId = option.id;
			this.findGoodsById();
			this.getMyPoint();
		},
		computed: {
			totalPoint: function () {
			  let price = this.goodsDetail.price || 0;
			return price * this.quantity || 0;
			}
		},
		methods: {
			quantityChange(type = '') {
				if(type == 'add'){
					this.quantity++
					
				}else if(type == 'minus'){
					this.quantity--
				}
			},

			exchange() {
				var that = this;
				if (that.goodsDetail.goodsType == '1') {
					that.goodsExchangePage();
				} else {
					uni.showModal({
						title: '提示',
						content: '确定要兑换吗',
						success: function(res) {
							if (res.confirm) {
								that.virtuallyGoodsExchange();
							}
						}
					});

				}
			},

			virtuallyGoodsExchange() {
				var that = this;
				uni.$uv.http.post('/goodsExchangeOrder/virtuallyGoodsExchange', {
					goodsId: that.goodsId,
					quantity: that.quantity,
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '操作成功',
						duration: 2000,
						complete: function() {
							setTimeout(() => {
								uni.reLaunch({
									url: "../my/my"
								});
							}, 2000);
						}
					});
				});
			},

			goodsExchangePage() {
				uni.navigateTo({
					url: '../goodsExchange/goodsExchange?id=' + this.goodsId + '&quantity=' + this.quantity
				});
			},

			getMyPoint() {
				var that = this;
				uni.$uv.http.get('/member/getMemberInfo').then(res => {
					that.point = res.data.point;
				});
			},

			findGoodsById() {
				var that = this;
				uni.$uv.http.get('/goods/findById', {
					params: {
						id: that.goodsId
					}
				}).then(res => {
					that.goodsDetail = res.data;
				});
			},
		}
	}
</script>

<style scoped lang="less">
page {
	height: auto !important;
	background-color: #f9fafb;
}
    .goods-detail{
		.main-pic{
			background-color: #FFF;
			margin-bottom: 20rpx;
			height: 686rpx;
			image{
				width: 100%;
				height: 686rpx;
			}
		}
	}
    .goods-desc{
		background: #FFF;
		border-radius: 28rpx;
		padding: 32rpx 32rpx 24rpx 32rpx;
		margin: 30rpx;
	}
	.goods-name-info {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #f3f3f3;
		position: relative;
		.goods-amount-l {
			font-size: 26rpx;
			color: #364f96;
			position:absolute;
			top:0;
			right:0;
			background-color: #f4f6fd;
			text-align: center;
			padding:10rpx;
		}
		.goods-jifen{
           font-size: 30rpx;
		   width: 50%;
		   span{
			   color:#f58b44;
			   font-size: 35rpx;
			   font-weight: 600;
		   }
		}
		 .goods-type-name{
			 font-size: 32rpx;
			 font-weight: 600;
			 color: #000;
			 margin-bottom: 24rpx;
			 width: 50%;
		 }
		 .goods-name{
			font-size: 20rpx;
			line-height: 24rpx;
			color: #747D8B;
		 }
	}
	 /* .goods-desc-line{
		width: 100%;
		width: 311px;
		height: 2rpx;
		background: #747D8B;
	} */

	.goods-amount {
		display: flex;
		align-items: center;
		padding-bottom: 12rpx;
		padding-top: 30rpx;
		

		.goods-amount-r {
			/* font-size: smaller; */
			font-size: 24rpx;
			line-height: 24rpx;
			color: #FF4A4A;
			display: flex;
			align-items: center;
		
		}
	}

	.exchange-block{
		.exchange-block-title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			.exchange-block-title-l{
				color: #000;
				font-size: 28rpx;
			font-weight: 600;
		    line-height: 28rpx;
			}
			.exchange-title-r{
			   color: #6D717D;
			   font-size: 24rpx;
			   line-height: 24rpx;
			   display: flex;
			   align-items: center;
			   .exchange-title-pice{
				 padding-right: 40rpx;
			   }
			}
		}
	}

	.amount-input-block{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 108rpx;
		background: #eaeef2;
		border-radius: 10rpx;
		padding: 0  20rpx;
		margin-top: 20rpx;
		.amount-input-title{
			display: flex;
			align-items: center;
			color: #747D8B;
			font-size: 26rpx;
			.amount-input-title-r{
				font-weight: 800;
				color: #f58b44
			}
		}
	}
	
	.amount-input{
		width: 208rpx;
		height: 68rpx; 
		padding: 0 !important; 
		background-color: #FFF; 
		border: none !important;
		border-radius: 30rpx !important;
		/deep/  .uni-input-input{
			color: #000;
			text-align: center;
		}
	}



	.my-point {
		color: #d0021b;
		padding-top: 32rpx;
		font-weight: bold;
	}

	.buy-quantity {
		padding-right: 32rpx;
	}

	

	

	.detail-title {
		text-align: center;
		padding-top: 28rpx;
		padding-bottom: 28rpx;
		padding:  28rpx 0;
		color: #000
	}

	.goods-detail-content {
		margin-top: 40rpx;
	   color: #000;
       background: #FFF;
       border-radius: 28rpx;
	   min-height: 150rpx;

	}

	.exchange-btn{
		    margin-top: 48rpx;
			color: #FFF;
			font-weight: 900;
			font-size: 28rpx;
			height: 100rpx;
			line-height:100rpx;
			background:#242e6b;
		    border-radius: 50rpx;
		}
</style>